<template>
    <div class="top_hidden top_hidden4">
        <dl class="fore1">
            <dt>特色主题</dt>
            <dd>
                <div class="top-hidden-list">
                    <a href="#">百战试用</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">百战金融</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">全球售</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">国际站</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">百战会员</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">百战预售</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">买什么</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">俄语站</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">装机大师</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">0元测评</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">港澳售</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">优惠券</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">秒杀</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">闪购</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">印尼站</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">百战金融科技</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">陪伴计划</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">出海招商</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">拍拍二手</a>
                </div>
            </dd>
        </dl>
        <dl class="fore2">
            <dt>行业频道</dt>
            <dd>
                <div class="top-hidden-list">
                    <a href="#">手机</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">智能数码</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">玩3C</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">电脑办公</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">家用电器</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">京鱼座智能</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">服装城</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">百战生鲜</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">家装城</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">母婴</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">食品</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">农资频道</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">整车</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">图书</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">劳动防护</a>
                </div>
            </dd>
        </dl>
        <dl class="fore3">
            <dt>生活服务</dt>
            <dd>
                <div class="top-hidden-list">
                    <a href="#">百战众筹</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">白条</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">百战金融App</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">百战小金库</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">理财</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">话费</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">水电煤</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">彩票</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">旅行</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">机票酒店</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">电影票</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">易购到家</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">游戏</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">拍拍回收</a>
                </div>
            </dd>
        </dl>
        <dl class="fore4">
            <dt>更多精选</dt>
            <dd>
                <div class="top-hidden-list">
                    <a href="#">合作招商</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">百战通信</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">百战E卡</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">百战小金库</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">企业采购</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">服务市场</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">办公生活馆</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">乡村招募</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">校园加盟</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">百战社区</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">游戏社区</a>
                </div>
                <div class="top-hidden-list">
                    <a href="#">知识产权维权</a>
                </div>
            </dd>
        </dl>
    </div>
</template>
<script>

export default {
    name:'SitesHidden',
    components:{
    }
}
</script>
<style lang="less" scoped>
.top_hidden {
        display: none;
        position: absolute;
        border: 1px solid #ccc;
        background-color: #fff;
        box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1);
        z-index: 999;
        dl{
            float: left;
            padding-left: 20px;
            dt{
                    margin-bottom: 5px;
                    font-weight: 700;
                    color: #666;
                    text-align: left;
                }
                dd{
                    padding-left: 15px;
                    overflow: hidden;
                    .top-hidden-list{
                        overflow: hidden;
                        float: left;
                        width: 80px;
                        white-space: nowrap;
                        text-align: left;
                        a{
                            color: #999;
                        }
                        a:hover{
                            color:#f10215;
                        }
                    }
                }
            }
            .fore1{
                width: 340px;
            }
            .fore2,.fore3,.fore4{
                width: 255px;
                border-left: 1px solid #eee
            }
        } 
    .top_hidden4 {
        right: -141px;
        width: 1188px;
        padding: 15px 0;
    }
</style>

